<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>佣金明细</title>
	<link rel="stylesheet" type="text/css" href="../../../../bangnuo/admin/layui/css/layui.css">
	<script type="text/javascript" src="../../../../bangnuo/admin/js/jquery-1.8.0.min.js"></script>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			type: 'GET',
			url: 'http://192.168.101.111:8080/test/test',
			dataType: "JSON",
			success: function(data) {
				if (data.success == true) {
					console.log("显示");
					console.log(data.data);
					$(".LAY-agent-list").append(data.data);
					$(".LAY-agent-list-box").show();
				} else {
					console.log("隐藏");
					$(".LAY-agent-list-box").hide();
				}
			}
		});
	});
</script>
<body style=" margin: 0; padding: 0;">
<div style="width: 100%; height: 900px;">
	<div style="">
		<p style="color: #007DDB; font-size: 20px; margin-left: 20px; margin-right: -20px;">佣金小计</p>
		<hr />
	</div>
	<div style="height: 200px; width: 100%; margin: 0; padding: 0;">
		<div class="layui-card" style="width: 500px; float: left; margin: 50px;">
			<div class="layui-card-body">
				<i class="layui-icon layui-icon-flag" style="font-size: 30px; color: #1E9FFF;"></i>
				<p>本月返佣数据（参考值）</p>
				<p style="margin-left: 200px; margin-right: -200px; margin-bottom: 30px; margin-top: -30px; font-size: 20px; color: #01AAED;"></p>
				<hr />
				<i class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #00FF00;">微信</i>
				<p style="margin-left: 200px; margin-right: -200px; margin-bottom: 30px; margin-top: -30px; font-size: 15px;"></p>
				<i class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #007DDB;">支付宝</i>
				<p style="margin-left: 200px; margin-right: -200px; margin-bottom: 30px; margin-top: -30px; font-size: 15px;"></p>
				<i class="layui-icon layui-icon-slider" style="font-size: 20px; color: #5FB878;">间联通道</i>
				<p style="margin-left: 200px; margin-right: -200px; margin-bottom: 30px; margin-top: -30px; font-size: 15px;"></p>
			</div>
		</div>
		<div class="layui-card" style="width: 500px; float: left; margin: 50px;">
			<div class="layui-card-body">
				<i class="layui-icon layui-icon-flag" style="font-size: 30px; color: #1E9FFF;"></i>
				<p>昨日返佣数据（参考值）</p>
				<p style="margin-left: 200px; margin-right: -200px; margin-bottom: 30px; margin-top: -30px; font-size: 20px; color: #01AAED;"></p>
				<hr />
				<i class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #00FF00;">微信</i>
				<p style="margin-left: 200px; margin-right: -200px; margin-bottom: 30px; margin-top: -30px; font-size: 15px;"></p>
				<i class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #007DDB;">支付宝</i>
				<p style="margin-left: 200px; margin-right: -200px; margin-bottom: 30px; margin-top: -30px; font-size: 15px;"></p>
				<i class="layui-icon layui-icon-slider" style="font-size: 20px; color: #5FB878;">间联通道</i>
				<p style="margin-left: 200px; margin-right: -200px; margin-bottom: 30px; margin-top: -30px; font-size: 15px;"></p>
			</div>
		</div>
	</div>
	<hr />
	<p style="color: #007DDB; font-size: 20px; margin-left: 20px; margin-right: -20px;">佣金明细</p>
	<hr />
	<div style="padding: 15px; display: none;" class="LAY-agent-list-box">
		<blockquote class="layui-elem-quote">
			<div class="LAY-agent-list">
			</div>
		</blockquote>
		<div>
		</div>
	</div>
	<div>

	</div>
	<!-- 选项卡 -->
	<div class="layui-tab">
		<ul class="layui-tab-title">
			<li class="layui-this">月佣金报表</li>
			<li>日佣金报表</li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<div class="layui-tab-content" style="margin: 10px;">
					<div class="layui-card-body">

						<form class="layui-form" action="">
							<div class="layui-form-item" style="margin: 10px;">
								<label class="layui-form-label">日期</label>
								<div class="layui-input-block" style="float: left;">
									<input type="text" name="startTime1" id="startTime1" required lay-verify="required" placeholder="开始时间"
										   autocomplete="off" class="layui-input">
								</div>
								<div style="float: left; margin: 10px;">~</div>
								<div class="layui-input-block" style="float: left; margin-left: 0px;">
									<input type="text" name="endTime1" id="endTime1" required lay-verify="required" placeholder="结束时间"
										   autocomplete="off" class="layui-input">
								</div>
								<div style="float: left; margin: 0px;">
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<table id="demo1" lay-filter="test1"></table>
				</div>
			</div>
			<div class="layui-tab-item">
				<div class="layui-tab-content" style="margin: 10px;">
					<div class="layui-card-body">

						<form class="layui-form" action="">
							<div class="layui-form-item" style="margin: 10px;">
								<label class="layui-form-label">日期</label>
								<div class="layui-input-block" style="float: left;">
									<input type="text" name="startTime2" id="startTime2" required lay-verify="required" placeholder="开始时间"
										   autocomplete="off" class="layui-input">
								</div>
								<div style="float: left; margin: 10px;">~</div>
								<div class="layui-input-block" style="float: left; margin-left: 0px;">
									<input type="text" name="endTime2" id="endTime2" required lay-verify="required" placeholder="结束时间"
										   autocomplete="off" class="layui-input">
								</div>
								<div style="float: left; margin: 0px;">
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<table id="demo2" lay-filter="test2"></table>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../../../bangnuo/admin/layui/layui.js"></script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="detail">查看明细</a>
</script>

<script type="text/javascript">
	$(function(){
		$.ajax({
			type: "GET",
			url: '/order/commissionDetailed',
			dataType:"json",
			success: function(data){
				document.getElementsByTagName("p")[2].innerHTML=data.queryResult.list[0].monthAcount;//月总计
				document.getElementsByTagName("p")[3].innerHTML=data.queryResult.list[0].monthAcountWx;//月微信
				document.getElementsByTagName("p")[4].innerHTML=data.queryResult.list[0].monthAcountAlipay;//月支付宝
				document.getElementsByTagName("p")[5].innerHTML="待开发";//月间联
				document.getElementsByTagName("p")[7].innerHTML=data.queryResult.list[0].dateAcount;//日总计
				document.getElementsByTagName("p")[8].innerHTML=data.queryResult.list[0].dateAcountWx;//日微信
				document.getElementsByTagName("p")[9].innerHTML=data.queryResult.list[0].dateAcountAlipay;//日支付宝
				document.getElementsByTagName("p")[10].innerHTML="待开发";//日间联
			}
		});
	});
</script>
<script>


	layui.use(['element', 'form', 'laydate', 'table'], function() {
		var element = layui.element,
				form = layui.form,
				laydate = layui.laydate,
				table = layui.table;

		laydate.render({
			elem: '#startTime1',
			type: 'month'
		});
		laydate.render({
			elem: '#endTime1',
			type: 'month'
		});

		laydate.render({
			elem: '#startTime2',
			type:'datetime'
		});
		laydate.render({
			elem: '#endTime2',
            type:'datetime'
		});

		form.on('submit(formDemo1)', function(data) {
			layer.msg(JSON.stringify(data.field));

			table.reload('demo1', {
				url: '/order/commissionDetailedMonth',
				method: 'post',
				contentType: "application/json;charset=UTF-8",
				where: {
					"startTime": data.field.startTime1,
					"endTime": data.field.endTime1
				} //设定异步数据接口的额外参数
			});
			return false;
		});

		form.on('submit(formDemo2)', function(data) {
			layer.msg(JSON.stringify(data.field));
			table.reload('demo2', {
				url: '/commission/findDayList/1/10',
				method: 'post',
				contentType: "application/json;charset=UTF-8",
				where: {
					"startTime": data.field.startTime2,
					"endTime": data.field.endTime2
				} //设定异步数据接口的额外参数
			});
			return false;
		});

		//第一个实例
		table.render({
			elem: '#demo1',
			toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
			url: '/commission/findMouthList', //数据接口
			method: 'post',
			contentType: "application/json;charset=UTF-8",
			response: {
				"statusName": "code",
				"statusCode": 10000,
				"msgName": "message",
				"countName": "total",
				"dataName": "queryResult"
			},
			parseData: function(res) {
				return {
					"code": res.code,
					"message": res.message,
					"total": res.queryResult.total,
					"queryResult": res.queryResult.list
				};
			},
			request: {
				pageName: 'page' //页码的参数名称，默认：page
				,
				limitName: 'size' //每页数据量的参数名，默认：limit
			},
			cols: [
				[ //表头
					{
						field: 'id',
						title: '编号',
						width: 100,
						sort: true,
						fixed: 'left'
					}, {
					field: 'monthDate',
					title: '日期',
					width: 200,
					sort: true
				}, {
					field: 'aliPay',
					title: '官方支付宝',
					width: 200,
					sort: true
				}, {
					field: 'wxPay',
					title: '官方微信',
					width: 200,
					sort: true
				}, {
					field: 'thirdParty',
					title: '间联通道',
					width: 200,
					sort: true
				}, {
					field: 'sum',
					title: '合计',
					width: 200,
					sort: true
				}, {
					field: 'score',
					title: '操作',
					templet: '#barDemo'
				}
				]
			]
		});

		//第二个实例
		table.render({
			elem: '#demo2',
			toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
			url: '/commission/findDayList/1/10', //数据接口
			page: true, //开启分页
			method: 'post',
			contentType: "application/json;charset=UTF-8",
			response: {
				"statusName": "code",
				"statusCode": 10000,
				"msgName": "message",
				"countName": "total",
				"dataName": "queryResult"
			},
			parseData: function(res) {
				return {
					"code": res.code,
					"message": res.message,
					"total": res.queryResult.total,
					"queryResult": res.queryResult.list
				};
			},
			request: {
				pageName: 'page' //页码的参数名称，默认：page
				,
				limitName: 'size' //每页数据量的参数名，默认：limit
			},
			cols: [
				[ //表头
                    {
                        field: 'id',
                        title: '编号',
                        width: 100,
                        sort: true,
                        fixed: 'left'
                    }, {
                    field: 'monthDate',
                    title: '日期',
                    width: 200,
                    sort: true
                }, {
                    field: 'aliPay',
                    title: '官方支付宝',
                    width: 200,
                    sort: true
                }, {
                    field: 'wxPay',
                    title: '官方微信',
                    width: 200,
                    sort: true
                }, {
                    field: 'thirdParty',
                    title: '间联通道',
                    width: 200,
                    sort: true
                }, {
                    field: 'sum',
                    title: '合计',
                    width: 200,
                    sort: true
                }, {
                    field: '',
                    title: '操作',
                    templet: '#barDemo'
                }
				]
			]
		});
		//监听工具条
		table.on('tool(test1)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

			if (layEvent === 'detail') { //查看
			    //获取当前行的数据
				  var index = layer.open({
					type: 2,
					title : '代理详情',
					content : '../../common/details.html?agentId='+data.agentId+'&time='+data.monthDate
				});
				layer.full(index);
			}
		});
		//监听工具条
		table.on('tool(test2)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

			if (layEvent === 'detail') { //查看
				//do somehing
				var index = layer.open({
					type: 2,
					area : ['1700px', '900px'],
					title : '提现申请',
					content : '../../common/details.html?agentId='+data.agentId+'&time='+data.monthDate
				});
				layer.full(index);
			}
		});
		//…
	});
	$(document).ready(function () {
		layui.use('laydate', function () {
			var laydates = layui.laydate;
			laydates.render({elem: '#startTime1', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'})
			laydates.render({elem: '#endTime1', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'})
		});
	});
	$(document).ready(function () {
		layui.use('laydate', function () {
			var laydates = layui.laydate;
			laydates.render({elem: '#startTime2', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'})
			laydates.render({elem: '#endTime2', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss'})
		});
	});
</script>
</html>
